import { PageFooter } from '@pages/HomePage/ui/PageFooter/PageFooter'
import { Grid } from '@shared/ui/Grid'
import { Title } from '@shared/ui/Title'
import { RegistrationLoginForm } from '@widgets/RegistrationLoginForm'
import { motion } from 'framer-motion'
import styles from './HomePage.module.scss'

const HomePage = () => {
  return (
    <div className={styles.wrapper}>
      <div className={styles.component}>
        <motion.div animate={{ y: '20px' }} className={styles['title-box']} initial={{ y: 0 }}>
          <motion.h1
            animate={{ backgroundPosition: '0% 0%' }}
            className={styles.title}
            initial={{ backgroundPosition: '100% 0%' }}
            transition={{ duration: 3, ease: 'linear', repeat: Infinity, repeatType: 'reverse' }}
          >
            Chill Todo
          </motion.h1>
          <p className={styles.subtitle}>
            Ваш надежный помощник в управлении задачами и командной работе!
          </p>
        </motion.div>

        <Grid className={styles['text-wrapper']} columns={'1fr 1fr'} gap={24}>
          <motion.div animate={{ x: 0 }} className={styles.desc} initial={{ x: '-100%' }}>
            <p>
              <span>Chill Todo</span> - это не просто таск-менеджер, это ваш персональный органайзер
              для личных дел и инструмент для командной работы с использованием канбан-досок. Наше
              приложение находится в активной разработке и скоро станет доступным как
              opensource-решение, идеально подходящее для небольших команд. Мы стремимся
              предоставить вам гибкость и контроль над вашими проектами.
            </p>
            <p>
              <span>Chill Todo</span> можно будет легко развернуть на собственном сервере. Следите
              за обновлениями - вместе мы сделаем управление задачами проще и приятнее!
            </p>
          </motion.div>
          <motion.div animate={{ x: 0 }} className={styles['image-box']} initial={{ x: '100%' }}>
            <p className={styles['login-text']}>
              Вы можете попробовать наше приложение абсолютно бесплатно на нашем сервере. Для этого
              вам нужно войти или зарегистрироваться воспользовашись конопками ниже.
            </p>
            <RegistrationLoginForm />
          </motion.div>
        </Grid>
        <section>
          <Title center className={styles['section-title']} tag='h2'>
            Управляйте личными задачами
          </Title>
          <Grid className={styles['text-wrapper']} columns={'1fr 1fr'} gap={24}>
            <div className={styles['image-box']}>
              {/*<img*/}
              {/*  alt=''*/}
              {/*  className={styles['text-img']}*/}
              {/*  src='/Screenshot%202024-04-08%20145000.png'*/}
              {/*/>*/}
            </div>
            <motion.div
              className={styles.desc}
              initial={{ opacity: 0 }}
              transition={{ delay: 0.4 }}
              whileInView={{ opacity: 1 }}
            >
              <p>
                <span>Chill Todo</span> - это не просто таск-менеджер, это ваш персональный
                органайзер для личных дел и инструмент для командной работы с использованием
                канбан-досок. Наше приложение находится в активной разработке и скоро станет
                доступным как opensource-решение, идеально подходящее для небольших команд. Мы
                стремимся предоставить вам гибкость и контроль над вашими проектами.
              </p>
              <p>
                <span>Chill Todo</span> можно будет легко развернуть на собственном сервере. Следите
                за обновлениями - вместе мы сделаем управление задачами проще и приятнее!
              </p>
            </motion.div>
          </Grid>
        </section>
        <section>
          <Title center className={styles['section-title']} tag='h2'>
            Создавайте проекты и канбан доски
          </Title>
          <Grid className={styles['text-wrapper']} columns={'1fr 1fr'} gap={24}>
            <div className={styles.desc}>
              <p>
                <span>Chill Todo</span> - это не просто таск-менеджер, это ваш персональный
                органайзер для личных дел и инструмент для командной работы с использованием
                канбан-досок. Наше приложение находится в активной разработке и скоро станет
                доступным как opensource-решение, идеально подходящее для небольших команд. Мы
                стремимся предоставить вам гибкость и контроль над вашими проектами.
              </p>
              <p>
                <span>Chill Todo</span> можно будет легко развернуть на собственном сервере. Следите
                за обновлениями - вместе мы сделаем управление задачами проще и приятнее!
              </p>
            </div>
            <div className={styles['image-box']}>
              {/*<img*/}
              {/*  alt=''*/}
              {/*  className={styles['text-img']}*/}
              {/*  src='/Screenshot%202024-04-08%20145000.png'*/}
              {/*/>*/}
            </div>
          </Grid>
        </section>
      </div>
      <PageFooter />
    </div>
  )
}
export default HomePage
